<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/aui/carts.css">
	</head>
	<body style="font-family:'黑体';">
		<div class="aui-content aui-content-padded">
			<!-- <header class="aui-bar aui-bar-nav" style="color:#000;">
				<div class="aui-title">购物车()</div>
				<a class="aui-pull-right aui-btn">
					<span class="aui-iconfont aui-icon-comment" style="color:#000;"></span>
				</a>
			</header> -->
			<!-- <div style="width:100%;height:1px;background-color: #ccc;"></div> -->
				<form>
					<div class="aui-row sp">
						<div class="aui-col-xs-1">
							<input class="aui-checkbox xuan" type="checkbox" name='check_cart[]'>
						</div>
						<div class="aui-col-xs-11">
							<div class="aui-col-xs-4">
								<img src="img/fenlei1.jpg">
							</div>
							<div class="aui-col-xs-8">
								<div class="aui-col-xs-10 con">
									家世界偶发卡了萨芬阿斯蒂芬阿道夫萨达
									家世界偶发卡了萨芬阿斯蒂芬阿道夫萨达
								</div>
								<div class="aui-col-xs-2" style="text-align:center; color: red; font-size:1rem;">ｘ</div>
								<div class="aui-col-xs-10 des">颜色：白色；尺码：M/170</div>
								<div class="aui-col-xs-2" style="text-align:center;">
									<i class="aui-iconfont aui-icon-down"  aui-popup-for="bottom"></i>
									<!-- --弹窗-- -->
									<div class="aui-popup aui-popup-bottom" id="bottom">
									    <div class="aui-popup-arrow"></div>
									    <div class="aui-popup-content">
									        <ul class="aui-list aui-list-noborder">
									            <li class="aui-list-item">
									                <div class="aui-list-item-inner aui-list-item-middle">
									                	<div class="aui-list aui-media-list" style="width:100%;">
										                	<div class="aui-list-item">
										                    	<div class="aui-media-list-item-inner">
										                    		<div class="aui-list-item-media">
										                    			<img src="img/fenlei1.jpg">
										                    		</div>
										                    		<div class="aui-list-item-inner">
										                    			<div class="aui-list-item-text">
											                    			<div class="aui-list-item-title" style="color:red;text-align:left;">
											                    				￥98
											                    			</div>
											                    			<div class="aui-list-item-right close">
											                    				x
											                    			</div>
										                    			</div>
										                    			<div class="aui-list-item-text">库存202件</div>
										                    			<div class="aui-info">已选：“蓝色” “XL”</div>
										                    		</div>
										                    	</div>
										                    </div>
									                    </div>
									                </div>
									            </li>
									            <li class="aui-list-item">
									                <div class="aui-list-item-inner">
									                    <div class="aui-list aui-media-list" style="width:100%;">
									                    	<div class="aui-list-header">颜色分类</div>
									                    	<div class="aui-list-item">
									                    		<div class="aui-row">
									                    			<div class="aui-col-xs-3">
									                    				<div class="aui-btn choose">
								                    					白色
								                    					</div>
									                    			</div>
									                    			<div class="aui-col-xs-3">
								                    					<div class="aui-btn choose">
								                    					黑色
								                    					</div>
									                    			</div>
									                    			<div class="aui-col-xs-3">
								                    					<div class="aui-btn choose">
								                    					红色
								                    					</div>
									                    			</div>
									                    			<div class="aui-col-xs-3">
								                    					<div class="aui-btn choose">
								                    					蓝色
								                    					</div>
									                    			</div>
									                    		</div>
									                    	</div>
									                    </div>
									                </div>
									            </li>
									            <li class="aui-list-item">
									            	<div class="aui-list aui-media-list" style="width:100%;">
									            		<div class="aui-list-header">尺寸</div>
									            		<div class="aui-list-item">
									            			<div class="aui-row">
									            				<div class="aui-col-xs-2">
								                    				<div class="aui-btn choose1">
							                    					M
							                    					</div>
								                    			</div>
								                    			<div class="aui-col-xs-2">
							                    					<div class="aui-btn choose1">
							                    					L
							                    					</div>
								                    			</div>
								                    			<div class="aui-col-xs-2">
							                    					<div class="aui-btn choose1">
							                    					XL
							                    					</div>
								                    			</div>
								                    			<div class="aui-col-xs-2">
							                    					<div class="aui-btn choose1">
							                    					2XL
							                    					</div>
								                    			</div>
								                    			<div class="aui-col-xs-2">
							                    					<div class="aui-btn choose1">
							                    					3XL
							                    					</div>
								                    			</div>
									            			</div>
									            		</div>
									            	</div>
									            </li>
									            <li class="aui-list-item">
									                <div class="aui-list-item-inner sure">
									                    确定
									                </div>
									            </li>
									        </ul>
									    </div>
									</div>
									<!-- --弹窗 end-- -->
								</div>
								<div class="aui-col-xs-12">
									<div class="aui-col-xs-5 money">￥ 98</div>
									<div class="aui-col-xs-7">
										<div class="aui-list-item-right">
											<a class="aui-btn aui-btn-default aui-btn-xs" id="min" onclick="min1()">-</a>
											<span style="float:left;">
												<input type="text" name="num" id="num" value="1">
											</span>
											<a class="aui-btn aui-btn-default aui-btn-xs" id="max" onclick="max1()">+</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="aui-row sp">
						<div class="aui-col-xs-1">
							<input class="aui-checkbox xuan" type="checkbox" name='check_cart[]'>
						</div>
						<div class="aui-col-xs-11">
							<div class="aui-col-xs-4">
								<img src="img/fenlei1.jpg">
							</div>
							<div class="aui-col-xs-8">
								<div class="aui-col-xs-10 con">
									家世界偶发卡了萨芬按理说京东方啊是
								</div>
								<div class="aui-col-xs-2" style="text-align: center;color: red; font-size:1rem;">x</div>
								<div class="aui-col-xs-10 des">颜色：白色；尺码：M/170</div>
								<div class="aui-col-xs-2" style="text-align:center;"><i class="aui-iconfont aui-icon-down"></i></div>
								<div class="aui-col-xs-12">
									<div class="aui-col-xs-5 money">￥ 98</div>
									<div class="aui-col-xs-7">
										<div class="aui-list-item-right">
											<a class="aui-btn aui-btn-default aui-btn-xs" id="min">-</a>
											<span style="float:left;">
												<input type="text" name="num" id="num" value="1">
											</span>
											<a class="aui-btn aui-btn-default aui-btn-xs" id="max">+</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</form>
			<!-- --底部-- -->
			<footer class="aui-bar aui-bar-tab" id="footer1" style="margin-bottom: 50px;font-size:0.75rem;">
				<div class="aui-bar-tab-item" tapmode>
					<label>
						<input class="aui-checkbox checkAll" type="checkbox">
						全选
					</label>
				</div>
				<div class="aui-bar-tab-item" tapmode>
					
				</div>
				<div class="aui-bar-tab-item" tapmode>
					合计：
				</div>
				<div class="aui-bar-tab-item" tapmode>
					<a href="account.html">结算：</a>
				</div>
			</footer>
		    <footer class="aui-bar aui-bar-tab" id="footer">
		        <div class="aui-bar-tab-item aui-active" tapmode>
		        	<a href="index.html">
			            <i class="aui-iconfont aui-icon-home"></i>
			            <div class="aui-bar-tab-label">
			            	首页
			            </div>
		            </a>
		        </div>
		        <div class="aui-bar-tab-item" tapmode>
		        	<a href="classify.html">
			            <i class="aui-iconfont aui-icon-star"></i>
			            <div class="aui-bar-tab-label">
			            	分类
			            </div>
		            </a>
		        </div>
		        <div class="aui-bar-tab-item" tapmode>
		            <a href="carts.html" style="color:#039be5;">
			            <i class="aui-iconfont aui-icon-cart"></i>
			            <div class="aui-bar-tab-label">
			            	购物车
			            </div>
		            </a>
		        </div>
		        <div class="aui-bar-tab-item" tapmode>
		            <a href="person.html">
			            <i class="aui-iconfont aui-icon-my"></i>
			            <div class="aui-bar-tab-label">
			            	我的
			            </div>
		            </a>
		        </div>
		    </footer>
		</div>
		<script type="text/javascript" src="js/aui/aui-popup.js"></script>
		<script type="text/javascript" src="js/jquery-3.1.1/jquery-3.1.1.min.js"></script>
		<script>
			var min=document.getElementById("min");
			var num=document.getElementById("num");
			var max=document.getElementById("max");

			function min1(){
				if(num.value<=1){
					num.innerHTML=1;
				}else{
					num.value-=1;
					num.innerHTML=num.value;
				}
			}
			function max1(){
				var num1 =parseInt(num.value);
				if(num1 >= 500){
					alert("亲，该宝贝不能购买更多哦！");
					num.value=500;
				}
				else{
					num.value=num1+1;
				}
			}
			//全选
            $(".checkAll").click(function () {
                if (this.checked) {
                    $(this).attr("checked", "checked");
                    $("input[name='check_cart[]']").each(function () {
                        this.checked = true;
                    });
                } else {
                    $(this).removeAttr("checked");
                    $("input[name='check_cart[]']").each(function () {
                        this.checked = false;
                    });
                }
            });
            //弹框
            var popup = new auiPopup();
		    function showPopup(){
		        popup.show(document.getElementById("bottom"))
		    }
		    $(".close").click(function(){
		    	$("#bottom").hide();
		    	$(".aui-mask").hide();
		    })
		    $(".choose").click(function(){
		    	$(this).addClass("dd").parent().siblings().children().removeClass("dd");
		    	var yanse = $(this).text();
		    	$(".aui-info").text("已选:“"+yanse+"”");
		    	alert("请选择尺寸");
		    	

		    	$(".choose1").click(function(){
			    	$(this).addClass("dd").parent().siblings().children().removeClass("dd");
			    	var chicun = $(this).text();
			    	$(".aui-info").text("已选:“"+yanse+"” “"+chicun+"”");
			    	$(".des").text("颜色:"+yanse+"; 尺寸:"+chicun);
			    })

		    })
		    
		</script>
	</body>
</html>